<template>
  <div class="menu-section">
    <div class="section-header" @click="toggleCollapsed">
      <span class="section-title">输入变量设置</span>
      <a-icon :type="collapsed ? 'down' : 'up'" />
    </div>
    <div v-show="!collapsed" class="menu-items">
      <!-- 开始节点的输入变量配置 -->
      <div v-if="isStartNode">
        <div class="config-item">
          <label class="config-label">子流程入参</label>
          <div class="start-node-inputs">
            <div 
              v-for="(variable, index) in inputVariables" 
              :key="index" 
              class="input-variable-row"
            >
              <a-input
                :value="variable.name"
                placeholder="变量名"
                size="small"
                style="width: 40%"
                @input="onStartNodeVariableNameChange(index, $event.target.value)"
              />
              <a-select
                :value="variable.type"
                placeholder="类型"
                size="small"
                style="width: 40%"
                @change="onStartNodeVariableTypeChange(index, $event)"
              >
                <a-select-option value="string">string</a-select-option>
                <a-select-option value="number">number</a-select-option>
                <a-select-option value="boolean">boolean</a-select-option>
                <a-select-option value="object">object</a-select-option>
                <a-select-option value="array">array</a-select-option>
              </a-select>
              <a-button 
                size="small" 
                type="danger" 
                @click="removeInputVariable(index)"
                icon="delete"
                style="width: 20%"
              />
            </div>
            <a-button size="small" @click="addStartNodeVariable" type="dashed" style="width: 100%">
              <a-icon type="plus" />
              添加入参
            </a-button>
          </div>
        </div>
      </div>

      <!-- 普通节点的输入变量配置 -->
      <div v-else>
        <div class="config-item">
          <label class="config-label">选择输入变量</label>
          <a-cascader
            :value="selectedInputVariable"
            :options="inputVariableOptions"
            placeholder="请选择前面节点的输出变量"
            style="width: 100%"
            size="small"
            @change="onInputVariableChange"
          />
        </div>

        <div class="config-item" v-if="inputVariables.length > 0">
          <label class="config-label">已选择的输入变量</label>
          <div class="selected-variables">
            <div 
              v-for="(variable, index) in inputVariables" 
              :key="index" 
              class="variable-tag"
            >
              <span>{{ variable.nodeName }} - {{ variable.outputName }}{{ variable.type ? `(${variable.type})` : '' }}</span>
              <a-icon type="close" @click="removeInputVariable(index)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputVariablesSection',
  props: {
    inputVariables: {
      type: Array,
      default: () => []
    },
    inputVariableOptions: {
      type: Array,
      default: () => []
    },
    collapsed: {
      type: Boolean,
      default: false
    },
    isStartNode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedInputVariable: []
    }
  },
  watch: {
    // 监听inputVariables的变化，当组件重新打开时重置选择
    inputVariables: {
      handler() {
        // 当inputVariables变化时，重置选择状态
        this.selectedInputVariable = []
      },
      immediate: true
    }
  },
  methods: {
    toggleCollapsed() {
      this.$emit('toggle-collapsed')
    },
    
    onInputVariableChange(value) {
      this.selectedInputVariable = value
      if (value && value.length === 2) {
        const selectedOption = this.findOptionByValue(this.inputVariableOptions, value)
        if (selectedOption) {
          this.addInputVariable()
        }
      }
    },
    
    findOptionByValue(options, value) {
      for (const option of options) {
        if (option.value === value[0]) {
          for (const child of option.children || []) {
            if (child.value === value[1]) {
              return child
            }
          }
        }
      }
      return null
    },
    
    addInputVariable() {
      if (this.selectedInputVariable.length === 2) {
        const selectedOption = this.findOptionByValue(this.inputVariableOptions, this.selectedInputVariable)
        if (selectedOption) {
          // 检查是否已经添加过
          const exists = this.inputVariables.some(v => 
            v.nodeId === selectedOption.nodeId && v.outputName === selectedOption.outputName
          )
          
          if (!exists) {
            this.$emit('add-input-variable', {
              nodeId: selectedOption.nodeId,
              nodeName: selectedOption.nodeName,
              outputName: selectedOption.outputName,
              type: selectedOption.outputType
            })
          }
          
          this.selectedInputVariable = []
        }
      }
    },
    
    removeInputVariable(index) {
      this.$emit('remove-input-variable', index)
    },
    
    // 开始节点输入变量相关方法
    addStartNodeVariable() {
      this.$emit('add-input-variable', {
        name: '',
        type: 'string'
      })
    },
    
    onStartNodeVariableNameChange(index, value) {
      const newVariables = [...this.inputVariables]
      newVariables[index] = { ...newVariables[index], name: value }
      this.$emit('update:inputVariables', newVariables)
    },
    
    onStartNodeVariableTypeChange(index, value) {
      const newVariables = [...this.inputVariables]
      newVariables[index] = { ...newVariables[index], type: value }
      this.$emit('update:inputVariables', newVariables)
    }
  }
}
</script>

<style scoped>
.menu-section {
  padding: 4px 0;
}

.menu-section:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  padding: 4px 12px;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px;
  cursor: pointer;
  background: #fafafa;
  transition: background-color 0.2s;
}

.section-header:hover {
  background: #f0f0f0;
}

.section-header .section-title {
  padding: 0;
  margin: 0;
}

.menu-items {
  padding: 8px 12px;
}

.config-item {
  margin-bottom: 8px;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-label {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.selected-variables {
  max-height: 120px;
  overflow-y: auto;
}

.variable-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 11px;
}

.variable-tag:last-child {
  margin-bottom: 0;
}

.variable-tag .anticon {
  cursor: pointer;
  color: #999;
}

.variable-tag .anticon:hover {
  color: #ff4d4f;
}

/* 开始节点输入变量样式 */
.start-node-inputs {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 8px;
  background: #fafafa;
}

.input-variable-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.input-variable-row:last-child {
  margin-bottom: 0;
}
</style> 